<template>
	<view class="container">
		<skeleton :skeleton="{name:'studyData'}" :showSkeleton="showSkeleton"></skeleton>

		<no-data :showErrorTip="showNoData"></no-data>

		<view v-if="showNoData==false && showSkeleton==false">
			<!-- 微课 -->
			<view class="videoBox" v-if="type == 0">
				<view class="text">
					<view class="boxIn">
						<video id="myVideo" class="myVideo" :src="mydata.filePath" controls show-center-play-btn enable-progress-gesture></video>
					</view>
					<view class="text__title">{{ mydata.title }}</view>
					<view class="text__header">
						<view class="text__namebox">
							<view class="text__header-name">{{ mydata.createTime }}</view>
						</view>

						<view class="text__header-collection">
							<view v-if="collectionIcon == 0" class="collectionClick" @click="collection(mydata.id,0)">
								<image class="collectionImg" src="../../../../static/study/no.png" alt />
								<span class="collectionText">收藏</span>
							</view>
							<view v-if="collectionIcon == 1" class="collectionActive" @click="collection(mydata.id,1)">
								<image class="collectionImg" src="../../../../static/study/yes.png" alt />
								<span class="collectionText">收藏</span>
							</view>
							<view class="read">{{ mydata.readVolume }} 已阅</view>
						</view>
					</view>
				</view>

				<view class="list">
					<view class="list__head">
						<view class="list__headin">
							<view class="list__headin-title">简介</view>
						</view>
						<view class="contentBox">
							<rich-text class="list__headin-content" :nodes="mydata.introduce"></rich-text>
							<!-- <view class="list__headin-btn" @click="linkTo(mydata.pointType, mydata.ascription)">考点评测</view> -->
						</view>
					</view>
				</view>
			</view>
			<!-- 文章 -->
			<view class="articleBox" v-if="type == 1 || type == 2">
				<view class="text">
					<view class="text__title1">{{ mydata.title }}</view>
					<view class="text__header">
						<view class="text__namebox">
							<view class="text__header-name">{{ mydata.createTime }}</view>
						</view>

						<view class="text__header-collection">
							<view v-if="collectionIcon == 0" class="collectionClick" @click="collection(mydata.id,0)">
								<image class="collectionImg" src="../../../../static/study/no.png" alt />
								<span class="collectionText">收藏</span>
							</view>
							<view v-if="collectionIcon == 1" class="collectionActive" @click="collection(mydata.id,1)">
								<image class="collectionImg" src="../../../../static/study/yes.png" alt />
								<span class="collectionText">收藏</span>
							</view>

							<view class="read">{{ mydata.readVolume }} 已阅</view>
						</view>
					</view>
				</view>

				<view class="list">
					<view class="list__head">
						<view class="list__headin">
							<view class="list__headin-title">简介</view>
						</view>
						<view class="contentBox">
							<rich-text :nodes="mydata.introduce" class="list__headin-contents"></rich-text>
							<!-- <view class="list__headin-btn" @click="linkTo(mydata.pointType, mydata.ascription)">考点评测</view> -->
						</view>
					</view>
				</view>
			</view>

			<!-- 法规-->
			<view class="articleBox" v-if="type == 3">
				<view class="text">
					<view class="text__title1">{{ mydata.title }}</view>
					<view class="text__header">
						<view class="text__namebox">
							<view class="text__header-name">{{ mydata.createTime }}</view>
						</view>

						<view class="text__header-collection">
							<view v-if="collectionIcon == 0" class="collectionClick" @click="collection(mydata.id,0)">
								<image class="collectionImg" src="../../../../static/study/no.png" alt />
								<span class="collectionText">收藏</span>
							</view>
							<view v-if="collectionIcon == 1" class="collectionActive" @click="collection(mydata.id,1)">
								<image class="collectionImg" src="../../../../static/study/yes.png" alt />
								<span class="collectionText">收藏</span>
							</view>

							<view class="read">{{ mydata.readVolume }} 已阅</view>
						</view>
					</view>
				</view>

				<view class="list">
					<view class="list__head">
						<view class="list__headin">
							<view class="list__headin-title">简介</view>
						</view>
						<view class="contentBox">
							<rich-text :nodes="mydata.introduce" class="list__headin-contents"></rich-text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 热搜 -->
			<view class="videoBox" v-if="type == 4">
				<view class="text">
					<view class="boxIn" v-if="mydata.type == 0">
						<video id="myVideo" class="myVideo" :src="mydata.filePath" controls show-center-play-btn enable-progress-gesture></video>
					</view>
					<view class="text__title">{{ mydata.title }}</view>
					<view class="text__header">
						<view class="text__namebox">
							<view class="text__header-name">{{ mydata.createTime }}</view>
						</view>
			
						<view class="text__header-collection">
							<view v-if="collectionIcon == 0" class="collectionClick" @click="collection(mydata.id,0)">
								<image class="collectionImg" src="../../../../static/study/no.png" alt />
								<span class="collectionText">收藏</span>
							</view>
							<view v-if="collectionIcon == 1" class="collectionActive" @click="collection(mydata.id,1)">
								<image class="collectionImg" src="../../../../static/study/yes.png" alt />
								<span class="collectionText">收藏</span>
							</view>
							<view class="read">{{ mydata.readVolume }} 已阅</view>
						</view>
					</view>
				</view>
			
				<view class="list">
					<view class="list__head">
						<view class="list__headin">
							<view class="list__headin-title">简介</view>
						</view>
						<view class="contentBox">
							<rich-text class="list__headin-content" :nodes="mydata.introduce"></rich-text>
							<!-- <view class="list__headin-btn" @click="linkTo(mydata.pointType, mydata.ascription)">考点评测</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import baseService from "@/services/study/index.js";
	import {
		isEmpty
	} from "@/utils/index";
	const service = new baseService();
	export default {
		data() {
			return {
				videoContext: undefined,
				videoId: "",
				articleId: "",
				type: "",
				mydata: {
					title: "",
					createTime: "",
					headerCollection: "0",
					readVolume: "0",
					introduction: ""
				},
				collectionIcon: -1,
				showNoData: false,
				showSkeleton: true
			};
		},
		onLoad(query) {
			this.videoId = query.id;
			this.articleId = query.id;
			this.type = query.type;
			this.loadData(query.id);
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		created() {},
		methods: {
			linkTo(pointType, ascription) {
				if (this.videoContext != undefined) {
					this.videoContext.stop();
				}
				uni.navigateTo({
					url: "/pages/exam/examsub?examType=2&pointType=" +
						pointType +
						"&amount=2" +
						"&ascription=" +
						ascription
				});
			},
			loadData(id) {
				service
					.studyInfo(id)
					.then(res => {
						if (res.success) {
							uni.$emit("studyFinished");
						}
						if (this.mydata.length == 0) {
							this.showNoData = true;
						}

						this.mydata = res.result;
						this.type = res.result.type;

						if (this.type == 0) {
							uni.setNavigationBarTitle({
								title: "公安业务课程"
							});
						} else if (this.type == 1) {
							uni.setNavigationBarTitle({
								title: "学习资讯"
							});
						} else if (this.type == 2) {
							uni.setNavigationBarTitle({
								title: "知识精讲"
							});
						}else if (this.type == 3) {
							uni.setNavigationBarTitle({
								title: "主要法律法规"
							});
						}else if (this.type == 4) {
							uni.setNavigationBarTitle({
								title: "同学们都在学什么"
							});
						}

						if (res.result.isCollected) {
							this.collectionIcon = 1;
						} else {
							this.collectionIcon = 0;
						}
					})
					.then(() => {
						this.showSkeleton = false; //页面请求完成，取消骨架屏展示
					});
			},
			collection(subjectId, type) {
				service.queryStudyCollection(subjectId, type).then(res => {
					if (type == 0) {
						this.collectionIcon = 1;
					} else if (type == 1) {
						this.collectionIcon = 0;
					}
				});
			}
		}
	};
</script>

<style lang="less">
	* {
		max-width: 100%;
		height: auto;
	}

	.videoBox {
		width: 100%;
		padding-top: 40upx;

		.boxIn {
			.myVideo {
				width: 100%;
				height: 380upx;
				border-radius: 10upx;
				margin-bottom: 20upx;
			}
		}
	}

	.articleBox {
		width: 100%;
		padding-top: 40upx;
	}

	.text {
		margin: 0 auto;
		border-radius: 8upx;
		width: 710upx;
		padding: 20upx 20upx 30upx;
		position: relative;
		box-shadow: 0px 4px 20px 0px rgba(153, 153, 153, 0.2);

		.ls {
			position: absolute;
			font-size: 20upx;
			text-align: center;
			top: 10upx;
			right: 20upx;
			width: 56upx;
			height: 25upx;
			line-height: 25upx;
			border-radius: 5upx;
			border: solid 1upx #ff0000;
			color: #ff0000;
		}

		&__title {
			font-size: 28upx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}

		&__title1 {
			width: 648upx;
			font-size: 28upx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}

		&__header {
			display: flex;
			margin-top: 12upx;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;

			.text__namebox {
				overflow: hidden;

				.text__header-img {
					width: 28upx;
					height: 28upx;
					border-radius: 50%;
					margin-right: 10upx;
					margin-top: 4upx;
					float: left;
				}

				.text__header-name {
					float: left;
					color: #999;
					font-size: 24upx;
					text-align: left;
				}
			}

			.text__header-collection {
				color: #999;
				font-size: 24upx;
				text-align: right;
				display: flex;

				.read {
					margin-left: 70upx;
				}

				.collectionClick {
					overflow: hidden;
				}

				.collectionActive {
					overflow: hidden;
				}

				.collectionClick {
					display: inline-block;
				}

				.collectionActive {
					display: inline-block;
				}

				.collectionImg {
					float: left;
					width: 29upx;
					height: 28upx;
					margin-right: 10upx;
				}

				.collectionText {
					float: right;
				}
			}
		}
	}

	.list {
		&__head {
			padding: 20upx 20upx 0;

			.list__headin {
				margin-top: 15upx;

				&-title {
					font-size: 30upx;
					font-weight: 600;
					text-align: left;
					margin-bottom: 40upx;
				}
			}

			.list__headin-btn {
				width: 600upx;
				height: 80upx;
				margin: 40upx auto;
				font-size: 28upx;
				line-height: 80upx;
				text-align: center;
				background-color: #5ea1f8;
				border-radius: 8upx;
				color: #ffffff;
			}
		}
	}

	.contentBox {
		margin: 0 auto;
		border-radius: 8upx;
		box-shadow: 0px 4px 20px 0px rgba(153, 153, 153, 0.2);
		padding: 20upx 20upx;
		width: 710upx;
		font-size: 28upx;
	}

	.list__headin-content {
		color: #999999;
		// margin-top: 22upx;
		// text-indent: 50upx;
		line-height: 1.8;
	}

	.list__headin-contentss {
		color: #999999;
		line-height: 1.8;
		// text-indent: 50upx;
	}

	.list__headin-contents {
		color: #353535;
		// text-indent: 50upx;
		line-height: 1.8;
	}
</style>
